import React, { useState, useEffect } from 'react'
import { Card, List, Tag, Button, Row, Col, Progress, Rate, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import { PlayCircleOutlined, BookOutlined, ClockCircleOutlined, UserOutlined, ArrowLeftOutlined } from '@ant-design/icons'

const TrainingCenter: React.FC = () => {
  const navigate = useNavigate()
  const [trainings, setTrainings] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchTrainings()
  }, [])

  const fetchTrainings = async () => {
    setLoading(true)
    try {
      // 模拟培训数据
      const mockTrainings = [
        {
          id: '1',
          title: '水稻种植技术培训',
          category: 'planting',
          duration: '2小时',
          instructor: '张教授',
          level: '初级',
          progress: 75,
          enrolled: 245,
          rating: 4.8,
          description: '全面讲解水稻种植的各个环节技术要点',
          videoUrl: '#',
          completed: false
        },
        {
          id: '2',
          title: '农产品电商营销',
          category: 'marketing',
          duration: '3小时',
          instructor: '李老师',
          level: '中级',
          progress: 30,
          enrolled: 189,
          rating: 4.6,
          description: '学习如何通过电商平台销售农产品',
          videoUrl: '#',
          completed: false
        },
        {
          id: '3',
          title: '有机农业技术',
          category: 'organic',
          duration: '2.5小时',
          instructor: '王专家',
          level: '高级',
          progress: 100,
          enrolled: 156,
          rating: 4.9,
          description: '有机农业的种植技术和管理方法',
          videoUrl: '#',
          completed: true
        },
        {
          id: '4',
          title: '农业机械操作培训',
          category: 'machinery',
          duration: '4小时',
          instructor: '赵工程师',
          level: '初级',
          progress: 0,
          enrolled: 78,
          rating: 4.7,
          description: '常用农业机械的操作和维护',
          videoUrl: '#',
          completed: false
        }
      ]
      setTrainings(mockTrainings)
    } catch (error) {
      message.error('获取培训数据失败')
    } finally {
      setLoading(false)
    }
  }

  const handleStartTraining = (training: any) => {
    if (training.completed) {
      message.info(`您已完成"${training.title}"培训`)
    } else {
      message.success(`开始学习: ${training.title}`)
      // 模拟开始学习
    }
  }

  const getCategoryName = (category: string) => {
    const categoryMap = {
      planting: '种植技术',
      marketing: '营销技巧',
      organic: '有机农业',
      machinery: '机械操作'
    }
    return categoryMap[category as keyof typeof categoryMap] || '其他'
  }

  const getLevelColor = (level: string) => {
    const colorMap = {
      '初级': 'green',
      '中级': 'orange',
      '高级': 'red'
    }
    return colorMap[level as keyof typeof colorMap] || 'default'
  }

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <Card 
        title={
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <Button 
              type="text" 
              icon={<ArrowLeftOutlined />} 
              onClick={() => navigate('/user-dashboard')}
              style={{ padding: '4px 8px' }}
            >
              返回
            </Button>
            <span>技术培训中心</span>
          </div>
        }
        style={{ marginBottom: '24px' }}
        extra={
          <Button type="primary" icon={<BookOutlined />}>
            我的学习记录
          </Button>
        }
      >
        <List
          loading={loading}
          dataSource={trainings}
          renderItem={training => (
            <List.Item
              style={{ 
                padding: '20px 0', 
                borderBottom: '1px solid #f0f0f0',
                background: training.completed ? '#f6ffed' : 'white'
              }}
              actions={[
                <Button 
                  type={training.completed ? "default" : "primary"}
                  icon={training.completed ? <BookOutlined /> : <PlayCircleOutlined />}
                  onClick={() => handleStartTraining(training)}
                >
                  {training.completed ? '已学完' : '开始学习'}
                </Button>
              ]}
            >
              <List.Item.Meta
                avatar={
                  <div style={{ 
                    width: '60px', 
                    height: '60px', 
                    background: 'linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%)',
                    borderRadius: '8px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: 'white',
                    fontSize: '24px'
                  }}>
                    <BookOutlined />
                  </div>
                }
                title={
                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                    <span style={{ fontSize: '18px', fontWeight: 600 }}>{training.title}</span>
                    <Tag color="blue">{getCategoryName(training.category)}</Tag>
                    <Tag color={getLevelColor(training.level)}>{training.level}</Tag>
                    {training.completed && <Tag color="green">已完成</Tag>}
                  </div>
                }
                description={
                  <div>
                    <p style={{ margin: '8px 0', color: '#666' }}>{training.description}</p>
                    <Row gutter={[16, 8]} style={{ marginTop: '12px' }}>
                      <Col span={24}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                          <span style={{ fontSize: '12px', color: '#999' }}>学习进度:</span>
                          <Progress 
                            percent={training.progress} 
                            size="small" 
                            style={{ flex: 1, maxWidth: '200px' }}
                          />
                          <span style={{ fontSize: '12px', color: '#999' }}>{training.progress}%</span>
                        </div>
                      </Col>
                      <Col xs={12} sm={6}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                          <ClockCircleOutlined style={{ color: '#999' }} />
                          <span style={{ fontSize: '12px', color: '#999' }}>{training.duration}</span>
                        </div>
                      </Col>
                      <Col xs={12} sm={6}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                          <UserOutlined style={{ color: '#999' }} />
                          <span style={{ fontSize: '12px', color: '#999' }}>{training.instructor}</span>
                        </div>
                      </Col>
                      <Col xs={12} sm={6}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                          <UserOutlined style={{ color: '#999' }} />
                          <span style={{ fontSize: '12px', color: '#999' }}>{training.enrolled}人报名</span>
                        </div>
                      </Col>
                      <Col xs={12} sm={6}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                          <Rate disabled defaultValue={training.rating} style={{ fontSize: '12px' }} />
                          <span style={{ fontSize: '12px', color: '#999' }}>{training.rating}</span>
                        </div>
                      </Col>
                    </Row>
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </Card>
    </div>
  )
}

export default TrainingCenter